const data = {
    name: '全网',
    itemStyle: {
        color: '#444',
        borderColor: '#444',
    },
    symbolSize: 14,
    tooltip: {
        formatter(params) {
            return `<strong>全网状态</strong>
            <p style="margin-top: 4px; font-size: 12px"><strong>认证成功率</strong>: <span style="color: #59C89C">88.12%</span></p>
            <p style="font-size: 12px"><strong style="font-size: 12px">DNS成功率</strong>: <span style="color: #59C89C">92.12%</span></p>
            <p style="font-size: 12px"><strong style="font-size: 12px">DHCP成功率</strong>: <span style="color: #59C89C">74.62%</span></p>
            `
        },

    },
    children: [
        {
            name: 'SLR01-WiFi-08a',
            symbolSize: 12,
            collapsed: true,
            itemStyle: {
                color: '#478CE9',
                borderColor: '#478CE9',
            },
            tooltip: {
                formatter(params) {
                    return `<strong>控制器: ${params.name}</strong>
                    <p style="margin-top: 4px; font-size: 12px"><strong style="font-size: 12px">IP</strong>: <span style="color: #fff">192.33.28.28</span></p>
                    <p style="font-size: 12px"><strong style="font-size: 12px">AP数量</strong>: <span style="color: #fff">8</span></p>
                    <p style="font-size: 12px"><strong style="font-size: 12px">健康度</strong>: <span style="color: #59C89C">48.12</span></p>
                    `
                }
            },
            children: [{
                name: '70:3a:0e:cb:6b:9c',
                symbolSize: 10,
                collapsed: true,
                itemStyle: {
                    color: '#FFCC2D',
                    borderColor: '#FFCC2D',
                },
                tooltip: {
                    formatter(params) {
                        return `<strong>AP: ${params.name}</strong>
                    <p style="margin-top: 4px; font-size: 12px"><strong style="font-size: 12px">IP</strong>: <span style="color: #fff">192.33.31.28</span></p>
                    <p style="font-size: 12px"><strong style="font-size: 12px">终端数量</strong>: <span style="color: #fff">8</span></p>
                    <p style="font-size: 12px"><strong style="font-size: 12px">健康度</strong>: <span style="color: #59C89C">48.12</span></p>
                    `;
                    }
                },
                children: [
                    {
                        name: '1045127452',
                        symbolSize: 8,
                        itemStyle: {
                            color: '#73F1C1',
                            borderColor: '#73F1C1',
                        },
                        tooltip: {
                            formatter(params) {
                                return `<strong>用户名: ${params.name}</strong>
                            <p style="margin-top: 4px; font-size: 12px"><strong style="font-size: 12px">IP</strong>: <span style="color: #fff">192.33.28.48</span></p>
                            <p style="font-size: 12px"><strong style="font-size: 12px">mac地址</strong>: <span style="color: #fff">70:3a:0e:cb:6b:9c</span></p>
                            <p style="font-size: 12px"><strong style="font-size: 12px">SNR</strong>: <span style="color: #59C89C">48dB</span></p>
                            `;
                            }
                        }
                    }
                ]
            }]
        },
        {
            name: 'SLR01-WiFi-08b',
            collapsed: true,
            children: [],
        },
        {
            name: 'SLR01-WiFi-08c',
            collapsed: true,
            children: [],
        }
    ]
};

export const topologyOption = {
    tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove'
    },
    toolbox: {
        top: 36,
        right: 0,
        feature: {
            saveAsImage: {},
        }
    },
    series: [
        {
            type: 'tree',

            data: [data],

            left: '2%',
            right: '2%',
            top: '8%',
            bottom: '8%',

            symbol: 'emptyCircle',

            orient: 'vertical',

            expandAndCollapse: true,

            label: {
                normal: {
                    position: 'top',
                    verticalAlign: 'middle',
                    align: 'right',
                    fontSize: 12
                }
            },

            leaves: {
                label: {
                    normal: {
                        position: 'bottom',
                        rotate: -90,
                        verticalAlign: 'middle',
                        align: 'left'
                    }
                }
            },

            animationDurationUpdate: 750
        }
    ]
};
